.button {
    user-select: none
    appearance: none !important
    background: transparent
    border: 0
    height: var(--button-height)
    padding: 0 var(--padding-small)
    display: inline-grid
    grid-auto-flow: column
    grid-gap: var(--padding-small)
    align-items: center
    justify-content: center
    border-radius: var(--border-radius)
    font-size: var(--primary-font-size)
    cursor: pointer
    white-space: nowrap
    outline: none
    line-height: var(--button-height)
    flex-shrink: 0
    transition: box-shadow 0.1s ease-in-out, filter 0.1s ease-in-out, opacity 0.1s ease-in-out

    > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word
        pointer-events: none
    }
    
    select {
        border: 0
        box-shadow: none
        padding: 0 var(--padding-small)
        margin: 0 calc(var(--padding-small) * -1)
        pointer-events: initial
        background: transparent
        min-width: 0
    }

    &[disabled] {
        pointer-events: none
        cursor: default

        > * {
            opacity: .7
        }
    }

    &[data-block] {
        display: grid
        width: 100%
    }

    &[data-shape='pill'] {
        border-radius: var(--button-height)
        padding: 0 var(--tertiary-font-size)
    }
}

//default
.button[data-variant='default'] {
    font-weight: normal
    color: var(--primary-text-color)

    &[disabled] {
        color: var(--disable-text-color)
    }

    @media (pointer: fine) {
        &:hover {
            background: var(--hover-background-color)
        }
    }

    &:active {
        background: var(--active-background-color)
    }

    &:focus-visible {
        box-shadow: inset 0 0 0 1px var(--accent-color), 0 0 0 var(--shadow-height) var(--accent-color)
    }
}

//link like
.button[data-variant='link'] {
    font-weight: 600
    color: var(--accent-color)

    &[data-accent='danger'] {
        color: var(--danger-color)
    }

    &[disabled] {
        color: var(--disable-text-color)
    }

    @media (pointer: fine) {
        &:hover {
            background: var(--hover-background-color)
        }
    }

    &:active {
        background: var(--active-background-color)
    }

    &:focus-visible {
        box-shadow: inset 0 0 0 1px var(--accent-color), 0 0 0 var(--shadow-height) var(--accent-color) !important
    }
}

//outline
.button[data-variant='outline'] {
    background: var(--background-color)
    color: var(--primary-text-color)
    box-shadow: inset 0 0 0 var(--shadow-height) var(--shadow-color), inset 0 calc(var(--shadow-height) * -1) 0 rgba(0,0,0,.05)

    &[disabled] {
        box-shadow: none
        background: var(--disable-background-color)
        color: var(--disable-text-color)
    }

    @media (pointer: fine) {
        &:hover:not(:active) {
            box-shadow: inset 0 0 0 var(--shadow-height) var(--disable-text-color), 0 var(--shadow-height) 0 rgba(0,0,0,.1)
        }
    }

    &:active {
        background: var(--active-background-color)
    }

    &:focus-visible {
        box-shadow: inset 0 0 0 1px var(--accent-color), 0 0 0 var(--shadow-height) var(--accent-color)
    }
}

//outline
.button[data-variant='dotted'] {
    background: var(--background-color)
    color: var(--primary-text-color)
    border: var(--shadow-height) dashed unquote('color-mix(in srgb, var(--tint, var(--secondary-text-color)) 65%, transparent)')

    &[disabled] {
        box-shadow: none
        background: var(--disable-background-color)
        color: var(--disable-text-color)
    }

    @media (pointer: fine) {
        &:hover:not(:active) {
            border-color: var(--disable-text-color)
        }
    }

    &:active {
        background: var(--active-background-color)
    }

    &:focus-visible {
        border-color: var(--accent-color)
    }
}

//flat
.button[data-variant='flat'] {
    background: var(--alternative-background-color)
    color: var(--primary-text-color)

    &[disabled] {
        background: var(--disable-background-color)
        color: var(--disable-text-color)
    }

    @media (pointer: fine) {
        &:hover {
            background: var(--hover-background-color)
        }
    }

    &:active {
        background: var(--active-background-color)
    }

    &:focus-visible {
        box-shadow: inset 0 0 0 1px var(--accent-color), 0 0 0 var(--shadow-height) var(--accent-color)
    }
}

//primary
.button[data-variant='primary'] {
    background: var(--accent-color)
    color: unquote('hsl(var(--background-hsl))')
    font-weight: 600
    box-shadow: inset 0 0 0 var(--shadow-height) var(--shadow-color), inset 0 calc(var(--shadow-height) * -1) 0 rgba(0,0,0,.05)

    &[disabled] {
        filter: grayscale(1)
        opacity: 0.5
    }

    @media (pointer: fine) {
        &:hover {
            filter: brightness(1.1);
        }
    }

    &:active {
        filter: brightness(.9);
    }

    &:focus-visible {
        box-shadow: 0 0 0 2px currentColor, 0 0 0 calc(var(--shadow-height) + 3px) var(--accent-color)
    }
}

//active
.button[data-variant='active'] {
    background: unquote('hsla(var(--accent-hsl), .1)');
    color: var(--accent-color)
    font-weight: 600
    cursor: default

    &[disabled] {
        background: var(--disable-background-color)
        color: var(--disable-text-color)
    }

    &:focus-visible {
        box-shadow: inset 0 0 0 1px var(--accent-color), 0 0 0 var(--shadow-height) var(--accent-color)
    }
}

//small
.button[data-size='small'] {
    font-size: var(--secondary-font-size)
    line-height: var(--icon-size)
    --button-height: var(--icon-size)
    grid-gap: var(--padding-mini)

    &[data-shape='pill'] {
        padding: 0 var(--padding-small)
    }
}

.group {
    display: flex

    .button {
        width: auto
    }
    
    .button:not(:last-child):not(:focus-visible) {
        margin-right: 1px
        box-shadow: var(--shadow-height) 0 0 var(--shadow-color)
    }
    
    .button:not(:first-child):not(:last-child) {
        border-radius: 0
    }

    .button:first-child:not(:last-child) {
        border-top-right-radius: 0
        border-bottom-right-radius: 0
    }

    .button:last-child:not(:first-child) {
        border-top-left-radius: 0
        border-bottom-left-radius: 0
    }
}